<template>
	<u-popup :show="commentShow" @close="commentClose" mode="bottom" closeOnClickOverlay :round="16">
		<view class="padding-lr">
			<view class="flex-direction padding gap">
				<text class="text-xl text-black font-400 text-center">{{$t('filed.pingjia')}}</text>
			</view>
			<u-form labelPosition="top" labelWidth="125">
				<u-form-item :label="$t('filed.xingji')" labelPosition="left">
					<view class="flex justify-end" style="margin-bottom: 5px;">
						<u-rate :count="5" v-model="star" activeColor="#F4AA2A" gutter="1" size="24" />
					</view>
				</u-form-item>
				<u-form-item :label="$t('filed.zhaopian')">
					<uploadImg @sendImage="sendImage" @delImage="delImage" ref="uploadImg" />
				</u-form-item>
				<u-form-item :label="$t('filed.neirong')">
					<u-textarea v-model="remark" :placeholder="$t('public.placeholderContent')" count
						maxlength="200"></u-textarea>
				</u-form-item>
			</u-form>
			<view class="flex-sub padding-tb-sm setButton" style="background: #06C168;border-radius: 40rpx;"
				@tap.stop="orderComment">
				<text class="font-400 text-white text-xl">{{$t('filed.queding')}}</text>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		orderComment
	} from '@/apis'
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				commentShow: false,
				images: [],
				remark: '',
				star: 0,
				item_id: null
			}
		},
		methods: {
			sendImage(event, keyWord) {
				this.images = [...this.images, ...event.sendList.splice(0, event.fileListLen)]
			},
			delImage(e) {
				this.images.splice(e, 1)
			},
			commentClose() {
				this.star = 0
				this.remark = ''
				this.$refs.uploadImg.uploadInit()
				this.commentShow = false
			},
			commentOpen(event) {
				this.item_id = event.item_id
				this.commentShow = true
			},
			async orderComment() {
				await orderComment({
					score: this.star,
					images: this.images.join(','),
					remark: this.remark,
					item_id: this.item_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.commentClose()
					this.$emit('commentSuccess')
				})
			}
		}
	}
</script>